<!-- 页头 -->
<template>
  <main class="page-header">
    <a-row>
      <a-col class="font-size-24" :span="12">
        keller-service
      </a-col>
      <a-col class="text-right" :span="12">
        <a-dropdown>
           <span @click.prevent>
             <a-avatar>{{ nickName.substring(0, 1) }}</a-avatar>
             {{ nickName }}
             <icon iconName="CaretDownFilled"></icon>
           </span>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="/userHome">
                  <icon icon-name="UserOutlined"></icon>
                  &nbsp;
                  个人中心
                </a>
              </a-menu-item>
              <a-menu-item>
                <a href="/resetPassword">
                  <icon icon-name="LockOutlined"></icon>
                  &nbsp;
                  修改密码
                </a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleLogout">
                  <icon icon-name="PoweroffOutlined"></icon>
                  &nbsp;
                  退出登录
                </a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

      </a-col>
    </a-row>
  </main>
</template>
<script lang="ts">
import * as authUtil from "@/ts/AuthUtils"
import Icon from "@/components/Icon.vue";

export default {

  components: {
    Icon

  },
  computed: {},
  data() {
    return {
      routes: [],
      nickName: "Keller",
      authUser:{}
    }
  },
  methods: {
    /**
     * 退出登录
     */
    handleLogout(){
      //TODO 清除浏览器缓存，清除服务器缓存
      localStorage.clear();

      this.$router.push("/login");
    }
  },
  mounted() {
    this.authUser = authUtil.getAuthUser();
    this.nickName = this.authUser.nickName;
  }
}
</script>
<style scoped>
.page-header {
  margin: 0;
  line-height: 64px;
  //background-color: white;
  padding: 0 50px;
}
</style>